<script>
import { selectCourseList, deleteCourseList } from '@/api/admin/course'
import { Search, Plus } from '@element-plus/icons-vue'
import { weeks } from '@/constant/index.js'
import AddCourseDialog from './dialog/AdminCourse/AddCourseDialog.vue'
import EditCourseDialog from './dialog/AdminCourse/EditCourseDialog.vue'
export default {
  components: {
    Search,
    Plus,
    AddCourseDialog,
    EditCourseDialog,
  },
  data() {
    return {
      params: {
        pageNo: 1,
        pageSize: 5,
        cname: '',
        tname: '',
        department: '',
      },
      //总条数
      total: 0,
      list: [],
      isShowAdd: false,
      isShowEdit: false,
    }
  },
  methods: {
    formatterTime(_, __, cellValue) {
      let [w, s, e] = cellValue.split('-')
      return `${weeks[w]} 第${s * 1 + 1}至${e}节`
    },
    resetParamsAndLoad() {
      this.params.pageNo = 1
      this.loadCourseList()
    },
    async loadCourseList() {
      let { total, list } = await selectCourseList(this.params)
      ;((this.total = total), (this.list = list))
    },
    async removeCourseById(course_id) {
      await deleteCourseList({
        course_id,
      })
      //更新课程列表数据
      await this.loadCourseList()
    },
    openEditDialog(row) {
      // console.log(row)
      // console.log(this.$refs.editDialog)
      this.$refs.editDialog.setDefaultForm({ ...row })
      this.isShowEdit = true
    },
  },
  created() {
    this.loadCourseList()
  },
}
</script>

<template>
  <div class="tools">
    <div class="search">
      <el-input
        class="offset"
        placeholder="课程名称"
        size="small"
        clearable
        v-model="params.cname"
      ></el-input>
      <el-input
        class="offset"
        placeholder="教师名称"
        size="small"
        clearable
        v-model="params.tname"
      ></el-input>
      <el-input
        class="offset"
        placeholder="系名"
        size="small"
        clearable
        v-model="params.department"
      ></el-input>
      <el-button type="primary" @click="resetParamsAndLoad">
        <el-icon>
          <Search></Search>
        </el-icon>
        <span>查询</span>
      </el-button>
    </div>
    <el-button type="success" size="default" @click="isShowAdd = true">
      <el-icon><Plus></Plus></el-icon>
      <span>新增</span>
    </el-button>
  </div>
  <el-table border stripe :data="list">
    <el-table-column type="index" label="序号" width="60" />
    <el-table-column label="课程名称" prop="course_name"></el-table-column>
    <el-table-column label="代课教师" prop="teacher_name"></el-table-column>
    <el-table-column label="所属系" prop="department_name"></el-table-column>
    <el-table-column label="年级" prop="course_grade" width="60"></el-table-column>
    <el-table-column label="学分" #default="{ row }" width="60">
      <el-tag size="small" effect="dark">{{ row.course_credit }}</el-tag>
    </el-table-column>
    <el-table-column label="上课时间" prop="course_time" :formatter="formatterTime">
    </el-table-column>
    <el-table-column label="已选" #default="{ row }" width="60">
      <el-tag type="info" size="small" effect="dark">{{ row.course_selected_count }}</el-tag>
    </el-table-column>
    <el-table-column label="座位数" #default="{ row }" width="70">
      <el-tag type="success" size="small" effect="dark">{{ row.course_max_size }}</el-tag>
    </el-table-column>
    <el-table-column label="操作" width="120" #default="{ row }">
      <el-button type="primary" size="small" link @click="openEditDialog(row)">编辑</el-button>
      <el-popconfirm title="是否删除当前课程" #reference @confirm="removeCourseById(row.course_id)">
        <el-button type="danger" size="small" link>删除</el-button>
      </el-popconfirm>
    </el-table-column>
  </el-table>
  <el-pagination
    v-model:page-size="params.pageSize"
    v-model:current-page="params.pageNo"
    :page-sizes="[5, 10, 20, 40, 60]"
    layout="total, sizes, prev, pager, next, jumper"
    background
    size="small"
    :total="total"
    @current-change="loadCourseList"
    @size-change="loadCourseList"
  >
  </el-pagination>
  <AddCourseDialog v-model="isShowAdd" @resetData="loadCourseList"></AddCourseDialog>
  <EditCourseDialog
    v-model="isShowEdit"
    @resetData="loadCourseList"
    ref="editDialog"
  ></EditCourseDialog>
</template>

<style scoped>
.tools {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
}
.search {
  display: flex;
  flex-flow: row nowrap;
}
.offset {
  margin-right: 10px;
}
.el-table {
  margin-top: 16px;
}
.el-tag {
  width: 100%;
}
.el-pagination {
  margin-top: 16px;
  justify-content: center;
}
</style>
